<template>
	<view>
		<view class="wrap-container">
			<!-- <view class="warp-input" v-for="(item,index) in inputData"> -->
			<view class="warp-input">
				<view class="warp-text">设备名称:</view>
				<u-input v-model="equipment_name" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">设备编号:</view>
				<u-input v-model="equip_id" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">设备型号:</view>
				<u-input v-model="equipment_typecode" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">安装日期:</view>
				<u-input v-model="usetime" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">安装位置:</view>
				<u-input v-model="useplace" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">设备坐标:</view>
				<u-input v-model="coordinate" :type="type" :border="border" :height="height" :disabled="true"
					@click="navMap(coordinate,equipment_name)" />
			</view>
			<view class="warp-input">
				<view class="warp-text">电耗:</view>
				<u-input v-model="energy_waste" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">状态:</view>
				<u-input v-model="status" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">网络状w1态:</view>
				<u-input v-model="network_status" :type="type" :border="border" :height="height" :disabled="true" />
			</view>

		</view>

		<!-- <view class="charts-box" v-for="(item, index) in chartsData" :key="index" :id="`chart${index}`">
		</view> -->
		  <view class="charts-box" v-for="(item, index) in chartsData" :key="index" :ref="`chart${index}`"></view>

		<!-- 	<view class="charts-box" v-for="(tag, index) in tags" :key="index" :class="`chart-box-${index}`">
			<transition-group :name="`chart-transition-${index}`">
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData[tag.id]" :key="index" />
			</transition-group>
		</view> -->
	</view>
</template>
<script>
	import * as echarts from 'echarts'
	export default {
		data() {
			return {
				chartsData: [],
				id: "",
				type: 'text',
				height: 60,
				border: true,
				equipment_name: "",
				equip_id: "",
				equipment_typecode: "",
				usetime: "",
				useplace: "",
				status: "",
				energy_waste: "",
				network_status: "",
				coordinate: "",
				ntervalId: null, // 定时器的 ID
				refreshCount: 0, // 计数器，记录当前已经请求的次数
				tags: [],
				count: 5,
				timesList: [],
				valuesList: [],
				chartMap: new Map(),
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getEqView();
			this.startRefreshing()
		},
		onUnload() {
			this.stopRefreshing();
		},
		methods: {
			renderCharts() {
				this.chartsData.forEach((item, index) => {
					console.log(item, "~~~~~~~~~~~~~~~~~~~");
					let myChart = this.chartMap.get(index);
					if (!myChart) {
						const chartDom = this.$refs[`chart${index}`][0].$el;
						myChart = echarts.init(chartDom);
						this.chartMap.set(index, myChart);
					}

					// 根据最新的数据更新图表
					const option = {
						title: {
							text: item.name
						},
						tooltip: {
							trigger: 'axis'
						},
						xAxis: {
							type: 'category',
							data: item.times,
							// axisLabel: {
							//     interval: 0  // 0 表示全部显示，1 表示隔一个标签显示一次，以此类推
							//   }
						},
						yAxis: {
							type: 'value'
						},
						series: [{
							data: item.data,
							type: 'line',
							smooth: true
						}]
					};
					myChart.setOption(option);
				});
			},
			
			refreshData() {
				return this.$u.api.monitor({
					"algorithmProcessId": "getAppMonitor",
					"param": {
						"data": {
							"structure_uuid": this.equip_id
						}
					}
				}).then(res => {
					this.tags = res.data.data.result.tags;
					this.tags.forEach(item => {
						const chartData = this.chartsData.find(data => data.name === item.tagDescribe);
						if (chartData) {
							chartData.times.push(item.times.substring(11, 19));
							if (chartData.times.length > 5) {
								chartData.times.shift();
							}
							chartData.data.push(item.value);
							if (chartData.data.length > 5) {
								chartData.data.shift();
							}
						} else {
							this.chartsData.push({
								name: item.tagDescribe,
								times: [item.times.substring(11, 19)],
								data: [item.value]
							});
						}
					});
					this.$nextTick(() => {
						this.renderCharts();
					},2000);
				}).catch(error => {
					console.error(error);
				});
			},
			
			getEqView() {
				this.$u.api.eqView({
					"algorithmProcessId": "getEqview",
					"param": {
						"data": {
							id: this.id
						}
					}
				}).then(Response => {
					const res = Response.data.data.result[0]
					this.equipment_name = res.equipment_name
					this.equip_id = res.equip_id
					this.equipment_typecode = res.equipment_typecode
					this.usetime = res.usetime
					let coordinateArr = res.coordinate.split(",")
					this.coordinate = coordinateArr[0] + "," + coordinateArr[1]


					this.useplace = res.useplace
					if (res.status) {
						let statusMap = {
							'1': '异常',
							'2': '运行',
							'3': '停止',
							'4': '维修维护'
						};
						this.status = statusMap[res.status]
					}
					if (res.network_status) {
						let netMap = {
							'1': '运行',
							'0': '在线',
						};
						this.network_status = netMap[res.network_status]
					}

				})
			},
			startRefreshing() {
				const interval = 4000; // 1秒等于1000毫秒

				// 设置定时器，每隔1秒执行一次refreshData方法
				this.intervalId = setInterval(() => {
					this.refreshData();
				}, interval);
			},
			stopRefreshing() {
				clearInterval(this.intervalId); // 停止定时器
			},
			navMap(coordinate, equipment_name) {
				console.log("111")
				uni.navigateTo({
					url: "/pages/sys/workbench/install?coordinate=" + coordinate + "&equipment_name=" +
						equipment_name
				});

			},
		}
	}
</script>
<style lang="scss">
	@import 'index.scss';

	page {
		background-color: #f5f5f5;
		padding: 34rpx 0 0 34rpx;
	}


	.wrap-container {
		width: 93%;
		height: 880rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-top: 12rpx;
		margin-bottom: 48rpx;


		.warp-input {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin: 24rpx 0;

			.warp-text {
				width: 24%;
				text-align: right;
				padding-right: 24rpx;
			}
		}
	}


	.charts-box {
		width: 93%;
		height: 530rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-bottom: 48rpx;
	}

	.chart-transition-1-enter-active,
	.chart-transition-1-leave-active,
	.chart-transition-2-enter-active,
	.chart-transition-2-leave-active,
	/* 更多的动画样式... */
		{
		transition: transform 0.5s;
	}

	.chart-transition-1-enter,
	.chart-transition-1-leave-to,
	.chart-transition-2-enter,
	.chart-transition-2-leave-to,
	/* 更多的动画样式... */
		{
		transform: translateX(-100%);
	}
</style>